<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-1.8.3.js"></script>
    <title>分页展示</title>
</head>
<body>
<table id="table" class="show" height="100" border="1" cellspacing="0">
    <thead>
    <tr>
        <td>城市名称</td>
        <td>城市编号</td>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>
<input type="button" value="上一页" onclick="previous()">
<input type="text" name="pageNumber" id="pageNumber" value="1"  style="width:15px">
<input type="button" value="下一页" onclick="nextPage()">
<input type="button" onclick="tiaozhuan()" value="跳转" id="aaa">
<p/>
<input onclick="f()" type="button" value="导出城市信息表">
<script>
    $(document).ready(function(){
        getData(pageNumber);
    });
    var pageNumber  = $("#pageNumber").val();

    function editPageNumber(pageNumber){
        if (/^\d+$/.test(pageNumber)){
            $("#pageNumber").val(pageNumber);
            getData(pageNumber);
        }
    }
    function previous() {
        if(pageNumber==1){
            console.log("当前已是最新页！");
            console.log("没看见是最新了吗？还点！弄你！");
            return;
        }
        pageNumber--;
        editPageNumber(pageNumber);
    }
    function nextPage() {
        pageNumber++;
        editPageNumber(pageNumber);
    }
    function tiaozhuan() {
        var a = $("#pageNumber").val();
        editPageNumber(a);
    }
    function getData(pageNum) {
        $.getJSON("/citys?pageNum=" + pageNum + "&pageSize=" + 15,
        function(data) {
                $("#tbody").empty();
            $.each(data,function(){
                var tr  = $("<tr/>");
                $("<td/>").html(this.chinese).appendTo(tr);
                $("<td/>").html(this.adcode).appendTo(tr);
                $("#tbody").append(tr);
            })
        })
    }
    function f() {
        window.location.href="/downloadexcel"
    }
</script>
</body>
</html>
